<template>
	<div v-if="detail">
		<NewSearchDetail v-model="visible" :title="title">
			<div class="car-popup-cont-left">
				<div class="trash-base">
					<div class="border-bottom-spot detail-title">
						基本信息
					</div>
					<div class="base-cont flex j-between a-center">
						<div class="flex a-center">
							<img class="m-r-10" :src="detail.picture ? detail.picture : facilityPicture">
							<div>
								<p class="m-b-5">
									{{detail.bigTypeName}}-{{ detail.smallTypeName}}
									<span class="status">{{detail.status || '- -'}}</span>
								</p>
								<p>{{detail.number || '- -'}}</p>
							</div>
						</div>
						<div class="item">
							<p class="line1 m-b-5" :title="detail.departName">所属机构
								:<span>{{ detail.departName || '- -' }}</span></p>
							<p class="line1" :title="detail.maintain">维护单位
								:<span>{{ detail.maintain || '- -' }}</span></p>
						</div>
						<div class="item">
							<p class="m-b-5">责任人
								:<span>{{ detail.principal || '- -' }}</span></p>
							<p>启用日期
								:<span>{{ detail.date ? detail.date.split(' ')[0] : '- -' }}</span></p>
						</div>
					</div>
					<div class="base-bottom">
						<Icon custom="i-icon icon-dizhi1" size="18" color="#eee" />
						<span>{{detail.site || '- -'}}</span>
					</div>
				</div>
				<div class="toilet-transfer-trash-left">
					<div class="dizuo"></div>
					<div class="left-img">
						<img :src="detail.picture ? detail.picture : facilityPicture">
					</div>
					<div class="left-btns">
						<div class="left-btns-item"
							:style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
							@click.stop="onClickVideo">
							<Icon custom="i-icon icon-jiankong11" size="22" />
							摄像头
						</div>
					</div>
				</div>
			</div>

			<div class="cont-right">
				<div class="right-bottom">
					<!-- 今日实况 -->
					<div class="bottom-work">
						<div class="border-bottom-spot configuration-title">
							今日实况
						</div>
						<div class="noScroll bottom-work-cont">
							<!-- <div class="case-title">收集/转运情况</div> -->
							<div class="case-cont">
								<div class="case-cont-item">
									<div class="item-left">
										<Icon custom="i-icon icon-shoujiliang" size="22" class="item-left-icon" />
										<div class="item-left-text">
											<p>转运量</p>
											<div><span>0</span>t</div>
										</div>
									</div>
									<div class="item-right">
										<p>转运车次</p>
										<p>{{todayCount}} 车次</p>
									</div>
								</div>
							</div>
							<div class="status-title">
								<span>压缩箱状态</span>
								<div class="status-title-list">
									<p>
										<span></span>
										在位
									</p>
									<p>
										<span></span>
										满溢
									</p>
									<p>
										<span></span>
										空位
									</p>
								</div>
							</div>
							<div class="noData">
								<img src="../../../../assets/new/detail_no.png">
								<p>暂无绑定设备</p>

								<!-- <ul class="box-title">
                    <li class="one"><span>1号</span></li>
                    <li class="two"><span>2号</span></li>
                    <li class="three"><span>3号</span></li>
                  </ul>
                  <ul class="boxs-title">
                    <li class="one"><span>4号</span></li>
                    <li class="one"><span>5号</span></li>
                    <li class="two"><span>6号</span></li>
                  </ul> -->

							</div>
							<!-- <div class="status-list">
                <div>
                  <p class="on">1号</p>
                </div>
                <div>
                  <p class="overflow">2号</p>
                </div>
                <div>
                  <p class="off">3号</p>
                </div>
                <div>
                  <p class="on">4号</p>
                </div>
                <div>
                  <p class="on">5号</p>
                </div>
                <div>
                  <p class="on">6号</p>
                </div>
              </div> -->
						</div>
					</div>

					<!-- 异常日历 -->
					<div class="bottom-calendar">
						<div class="border-bottom-spot configuration-title">
							异常日历
						</div>
						<div class="transfer-calendar">
							<el-calendar v-model="calendar">
								<template slot="dateCell" slot-scope="{data}">
									<!-- 非当月 -->
									<div v-if="data.type != 'current-month'" @click.stop>
									</div>
									<!-- 当月 -->
									<div v-else class="cont"
										:class="{'day-after':isBeyondDate(data.day),'success':getWorkCalendarDate(data.day) && getWorkCalendarDate(data.day).sjCount > 0}"
										@click.stop="onClickCalendar(data.day)">
										<p>
											{{ data.day.split('-')[2]}}
										</p>
										<div class="cont-status"
											v-if="getWorkCalendarDate(data.day) && (getWorkCalendarDate(data.day).is_later_in != 0 || getWorkCalendarDate(data.day).is_leave_early != 0 || getWorkCalendarDate(data.day).is_no_work != 0)">
											<span class="err"></span>
										</div>
									</div>
								</template>
							</el-calendar>
						</div>
						<!-- 日历弹框 -->
						<div class="case noScroll" v-if="calendarCaseVisible">
							<div class="case-date" @click.stop="calendarCaseVisible=false">
								<div class="bottom-work-img">
									{{modalDate}}
								</div>
								<Icon custom="i-icon icon-guanbi" size="18" />
							</div>
							<div class="case-cont">
								<div class="case-cont-item">
									<div class="item">
										<p class="">收集量</p>
										<div class="line"></div>
										<span class="no-equipment">暂无设备</span>
									</div>
								</div>
								<div class="case-cont-item">
									<div class="item">
										<p class="">收集次数</p>
										<div class="line"></div>
										<span>{{collectCount}}</span>
									</div>
								</div>
							</div>
							<div class="case-list p-20">
								<div class="m-b-10 case-list-name">报警异常</div>
								<div class="noData">
									<img src="../../../../assets/new/detail_no.png">
									<p>暂无异常</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</NewSearchDetail>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue";
	import {
		formatDate
	} from '@/utils/dateRangUtil'
	export default {
		components: {
			NewSearchDetail,
		},
		data() {
			return {
				visible: false,
				dataId: '',
				title: '',
				detail: {},
				facilityPicture: require('../../../../assets/main/transfer-img.png'),
				calendar: new Date(),
				caledarArr: [],
				date: '',
				// 日历弹框
				calendarCaseVisible: false,
				modalDate: '',
				collectCount: '', // 收集次数
				todayCount: '', // 今日收集次数
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getTrashCaledar()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.dataId = ''
					this.workCalendar = new Date()
					this.calendarCaseVisible = false
					this.date = formatDate(new Date())
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				bus.$on('showMainSearchTransferDetail', data => {
					this.dataId = data.id
					this.title = data.title
					this.visible = true
				})
				this.date = formatDate(new Date())
				// 日历组件上个月添加点击事件
				this.$nextTick(() => {
					// 点击前一个月
					let prevBtn = document.querySelector(
						'.transfer-calendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
					prevBtn.addEventListener('click', () => {
						this.onClickMonthList()
					})
				})
				// 日历组件下个月添加点击事件
				this.$nextTick(() => {
					// 点击后一个月
					let prevBtn = document.querySelector(
						'.transfer-calendar .el-calendar__button-group .el-button-group>button:last-child');
					prevBtn.addEventListener('click', () => {
						this.onClickMonthList()
					})
				})
			},
			getDetail() {
				this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
					this.detail = res
					if (this.detail.status == 0) {
						this.detail.status = '正常'
					} else if (this.detail.status == 1) {
						this.detail.status = '废弃'
					} else if (this.detail.status == 2) {
						this.detail.status = '维修'
					} else if (this.detail.status == 3) {
						this.detail.status = '拆除'
					} else if (this.detail.status == 4) {
						this.detail.status = '暂停'
					}
				})
			},
			// 作业日历点击上月下月触发
			onClickMonthList() {
				this.date = formatDate(this.calendar)
				this.getTrashCaledar()
			},
			// 获取日历
			getTrashCaledar() {
				let params = {
					id: this.dataId,
					date: this.date + ' 00:00:00'
				}
				this.$http.getMapTrashCaledar(params).then((res) => {
					if (res.code === 200) {
						this.caledarArr = res.result
						this.todayCount = this.caledarArr.find(item => item.date == formatDate(new Date())).sjCount
					}
				})
			},
			// 点击日历某一天
			onClickCalendar(date) {
				if (!this.isBeyondDate(date)) {
					let data = this.caledarArr.find(item => item.date == date)
					this.collectCount = data.sjCount
					this.modalDate = date
					this.calendarCaseVisible = true
				}
			},
			// 是否超出日期
			isBeyondDate(date) {
				return formatDate(new Date()) < date
			},
			getWorkCalendarDate(date) {
				return this.caledarArr.find(item => item.date == date)
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 0) {
					let params = {
						equipcode: this.detail.equipcode,
						eqptype: this.detail.eqptype,
						details: this.detail.channels,
					}
					bus.$emit('showPlayVideoModal', params)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/input";
	@import "@/scss/iviewCssReset/elCalendar";

	.car-popup-cont-left {
		margin-right: 2px;
		width: 748px;
		height: 220px;
		background-image: url(../../../../assets/new/trash.png);
		background-size: 100% 100%;
	}

	.cont-right {
		width: 440px;
	}

	// 左侧
	.toilet-transfer-trash-left {
		width: 746px;
		height: 580px;
		margin-right: 7px;
		background-image: url(../../../../assets/new/wc-border.png);
		background-size: 100% 100%;
		margin-top: 10px;

		.left-img {
			display: flex;
			justify-content: center;
			margin-bottom: 40px;
			padding: 0 30px;
			width: 100%;

			img {
				max-width: 680px;
				margin-top: 70px;
				height: 380px;
			}
		}

		.left-btns {
			display: flex;
			justify-content: space-around;
			margin: auto;
			margin-right: 7px;

			.left-btns-item {
				display: flex;
				justify-content: center;
				width: 120px;
				height: 45px;
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1eb0fc;
				border-radius: 4px;
				color: #ffffff;
				font-size: 14px;
				font-weight: 500;
				line-height: 45px;
				cursor: pointer;

				.ivu-icon {
					line-height: 1.8;
				}
			}
		}
	}

	// 右侧基础信息
	.trash-base {
		// border: 1px solid rgba(255, 255, 255, 0.1);

		.base-cont {
			display: flex;
			box-sizing: border-box;
			padding: 20px 20px;
			color: rgba(255, 255, 255, 0.7);
			line-height: 28px;

			img {
				width: 61px;
				height: 60px;
				border-radius: 50%;
			}

			.item {
				height: 60 px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				p {
					font-size: 14px;

					span {
						color: #eee;
						margin-left: 3px;
						padding: 13px;
					}
				}
			}

			.status {
				background: rgba(30, 176, 252, 0.35);
				color: #32b16c;
				display: inline-block;
				width: 50px;
				height: 24px;
				border: 1px solid #1eb0fc;
				border-radius: 4px;
				margin-left: 10px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1eb0fc;
				line-height: 22px;
				text-align: center;
			}
		}

		.base-bottom {
			display: flex;
			align-items: center;
			height: 54px;
			padding-left: 38px;
			color: #a0a0a0;
			// border-top: 1px solid rgba(255, 255, 255, 0.1);

			span {
				margin-left: 4px;
				color: #ffffff;
				font-size: 16px;
			}
		}
	}

	.cont-right {
		.right-bottom {
			display: flex;
			flex-direction: column;

			.bottom-work {
				// border: 1px solid rgba(255, 255, 255, 0.1);
				width: 454px;
				height: 406px;
				background-image: url(../../../../assets/new/wc-border2.png);
				background-size: 100% 100%;
				margin-bottom: 2px;

				.bottom-work-cont {
					// height: 435px;
					height: 500px;
					overflow-y: auto;
					margin-bottom: 10px;

					// .case-title {
					//   height: 32px;
					//   line-height: 32px;
					//   padding-left: 20px;
					//   background: rgba(255, 255, 255, 0.1);
					//   color: #eee;
					// }
					.case-cont {
						padding: 0 20px;

						.case-cont-item {
							display: flex;
							// justify-content: space-around;
							align-items: center;
							padding: 15px 0;
							margin-left: 15px;
							border-bottom: 1px solid rgba(255, 255, 255, 0.2);

							.item-left {
								display: flex;
								align-items: center;

								.item-left-icon {
									width: 61px;
									height: 60px;
									line-height: 50px;
									text-align: center;
									border-radius: 50px;
									background-image: url(../../../../assets/new/transshipment.png);
									background-size: 100% 100%;
									margin-right: 10px;
								}

								.item-left-text {
									p {
										color: #eee;
										font-size: 16px;
										font-weight: 500;
										line-height: 36px;
									}

									div {
										color: #eee;

										span {
											font-size: 16px;
										}
									}
								}
							}

							.item-right {
								margin: 0 68px;

								p:first-child {
									color: #ffffff;
									font-size: 16px;
									font-family: PingFang SC;
									font-weight: 500;
									line-height: 36px;
								}

								p:last-child {
									min-width: 60px;
									width: 80px;
									height: 30px;
									line-height: 30px;
									text-align: center;
									color: #ffffff;
									font-size: 16px;
									font-weight: bold;
									background: rgba(30, 176, 252, 0.35);
									border: 1px solid #1eb0fc;
									border-radius: 18px;
								}
							}
						}

						.case-cont-item:last-child {
							border: none;
						}
					}

					.status-title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20px;
						height: 40px;
						margin: 0 5px;
						background: rgba(30, 176, 252, 0.25);
						border-radius: 2px;

						// background: rgba(255, 255, 255, 0.1);
						span {
							font-size: 16px;

							font-weight: 500;
							color: #ffffff;
							line-height: 36px;
						}

						.status-title-list {
							display: flex;

							p {
								color: #fff;
								margin-left: 20px;
								display: flex;
								align-items: center;
								font-size: 16px;

								// border-left: 4px solid;
								// padding-left: 6px;
								// border-color: #666;
								span {
									width: 6px;
									height: 100%;
									margin-right: 6px;
									display: inline-block;
									border: 1px solid #666;
									background: #666;
								}
							}

							p:first-child span {
								border-color: rgb(20, 104, 83);
								background: rgb(20, 104, 83);
							}

							p:nth-child(2) span {
								border-color: rgb(169, 6, 19);
								background: rgb(169, 6, 19);
							}

							p:nth-child(3) span {
								border: 1px dotted #666;
								background: transparent;
							}
						}
					}

					.noData {
						div {
							display: flex;
						}

						// margin: 28px 150px;
						// background-size: 100% 100%;
						// width: 140px;
						// height: 140px;
						// background-image: url(../../../../assets/new/shouji.png);
						// p {
						//   font-size: 18px;
						//   font-weight: 400;
						//   color: #ffffff;
						//   line-height: 40px;
						//   margin-top: 160px;
						// }
					}

					.status-list {
						padding: 20px;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						div {
							width: 30%;
							display: flex;
							justify-content: center;

							p {
								width: 58px;
								height: 34px;
								line-height: 34px;
								text-align: center;
								border-radius: 4px;
								margin-right: 4px;
								margin-bottom: 10px;
							}
						}

						.on {
							background: #1eab88;
							color: #eee;
						}

						.overflow {
							background: #a90613;
							color: #eee;
						}

						.off {
							border: 1px dashed #626262;
							color: #626262;
						}
					}
				}
			}

			.bottom-calendar {
				position: relative;
				// border: 1px solid rgba(255, 255, 255, 0.1);
				width: 454px;
				height: 400px;
				background-image: url(../../../../assets/new/wc-border2.png);
				background-size: 100% 100%;
				overflow: hidden;

				.transfer-calendar {
					.cont {
						.cont-status {
							.err {
								display: inline-block;
								width: 8px;
								height: 8px;
								border-radius: 8px;
								text-align: center;
								background: #eb6100;
							}
						}
					}

					.success {
						color: #fff;

						p {
							background: #25bb96;
						}
					}
				}
				// 弹框
				.case {
					position: absolute;
					top: 0;
					left: 0;
					width: 454px;
					height: 400px;
					background-image: url(../../../../assets/new/detail_rili_bgc.png);
					background-size: 100% 100%;
					overflow-y: auto;
				
					.case-date {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #eee;
						line-height: 46px;
						padding:11px 20px 0 14px;
				
						i {
							cursor: pointer;
						}
					}
				
					.case-cont {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 60px;
						padding: 0 20px;
						margin: 0 6px;
						color: #e9eaed;
						border-bottom: 1px solid rgba(30,176,252,.6);
				
						.item {
							width: 180px;
							height: 40px;
							background-image: url(../../../../assets/new/detail_rili_line.png);
							background-size: 100% 100%;
							line-height: 40px;
							border-radius: 40px;
							display: flex;
							align-items: center;
							
							.line{
								width: 1px;
								height: 18px;
								background-color: #1EB0FC;
							}
				
							p {
								width: 50%;
								text-align: center;
								position: relative;
							}
				
							// p::before {
							// 	content: "";
							// 	width: 1px;
							// 	height: 15px;
							// 	background: rgba($color: #fff, $alpha: 0.3);
							// 	position: absolute;
							// 	right: 0;
							// 	top: 10px;
							// }
				
							span {
								width: 50%;
								text-align: center;
							}
				
							.no-equipment {
								color: #1EB0FC;
							}
						}
					}
				
					.case-list {
						color: #eee;
				
						.time {
							padding: 0 3px;
							border-radius: 2px;
							background: #333333;
							position: relative;
							display: inline-block;
						}
				
						.content {
							margin-top: 10px;
						}
				
						::v-deep {
							.ivu-timeline-item-tail {
								border-left: 2px solid #2d2d2d;
							}
				
							.ivu-timeline-item-head-blue {
								border-color: #2d2d2d;
								color: #2d2d2d;
							}
				
							.ivu-timeline-item-head {
								background-color: #000000;
							}
						}
					}
				}
			}
		}
	}

	.detail-title {
		font-size: 16px;

		font-weight: bold;
		color: #23cefd;
		line-height: 48px;

		padding-left: 20px;
		background-image: url(../../../../assets/new/titlebox.png);
		width: 206px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 11px;
		margin-top: 14px;
	}

	.configuration-title {
		line-height: 48px;
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
		padding-left: 20px;
		background-image: url(../../../../assets/new/titleboxbig.png);
		width: 366px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 14px;
		margin-top: 17px;
	}

	.border-top-spot {
		// border-top: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.border-top-spot::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		box-sizing: border-box;
		// border-left: 3px solid #fff;
		// border-right: 3px solid #fff;
		background: rgba(255, 255, 255, 0.1);
	}

	.border-bottom-spot {
		// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.border-bottom-spot::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		box-sizing: border-box;
		// border-left: 3px solid #fff;
		// border-right: 3px solid #fff;
		// background: rgba(255, 255, 255, 0.1);
	}

	.noData span {
		width: 24px;
		height: 15px;
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 42px;
		padding-left: 20px;
	}

	.box-title {
		display: flex;
		margin: 25px;

	}

	.box-title .one {
		width: 70px;
		height: 42px;
		background: #1EB0FC;
		border-radius: 4px;
		margin-right: 55px;
	}

	.box-title .two {
		width: 70px;
		height: 42px;
		border: 1px solid #FFFFFF;
		opacity: 0.4;
		border-radius: 4px;
		margin-right: 55px;
	}

	.box-title .three {
		width: 70px;
		height: 42px;
		background: #FF3333;
		border-radius: 4px;
	}

	.boxs-title {
		display: flex;
		margin: 25px;
	}

	.boxs-title .one {
		width: 70px;
		height: 42px;
		background: #1EB0FC;
		border-radius: 4px;
		margin-right: 55px;

	}

	.boxs-title .two {
		width: 70px;
		height: 42px;
		border: 1px solid #FFFFFF;
		opacity: 0.4;
		border-radius: 4px;

	}
	
	.noData{
		font-size: 16px;
		text-align: center;
		padding: 0;
		img{
			width: 120px;
			height: 120px;
			margin: 0;
		}
	}
	.bottom-work-img{
		width: 306px;
		height: 46px;;
		background-image: url(../../../../assets/new/detail_nav_306.png);
		background-size: 100% 100%;
		padding-left: 20px;
	}
	::v-deep{
		.el-calendar__header {
		    padding: 4px 20px;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day {
		    height: 42px;
		}
		.el-calendar-table thead th {
		    padding: 8px 0;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont p {
		    width: 26px;
		    height: 26px;
		    line-height: 26px;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont .cont-status {
		    line-height: 16px;
		}
	}
</style>
